<template>
  <div class="wallet">
    <div class="cardtitle">店铺特权收益</div>
    <div class="Cumulative">
      <div class="sum">
        <div class="font">累计收益(元)</div>
        <div class="red">{{ walles.totalmoney_in }}</div>
      </div>

      <div class="req" @click="$router.push('/drawal')">去提现</div>
    </div>
    <div class="walletinfo">
      <div v-for="(value, index) in walletdata" :key="index">
        <div class="font">{{ value.name }}</div>
        <div class="red">{{ walles[value.code] }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { getmoneybag } from "@/api/profit";
import { useStore } from "vuex";
export default {
  setup() {
    const data = reactive({
      walletdata: [
        { name: "余额", code: "balance" },
        { name: "提现中", code: "totalmoney_occupy" },
        { name: "已提现", code: "totalmoney_out" },
        // { name: "未结算", num: "200.00" },
      ],
      walles: {
        moneybag_id: "", //钱包ID
        member_id: "", //会员ID
        totalmoney_in: "0.00", //总入账金额
        totalmoney_out: "0.00", //总出账金额
        totalmoney_occupy: "0.00", //待提总额
        balance: "0.00", //余额
      },
    });
    const store = useStore();
    const onload = async () => {
      const res = await getmoneybag({
        member_id: store.state.userInfo.F_UserId,
      });
      if (!res[0]||!res[1].length) {
        return;
      }
      data.walles = res[1][0];
      store.state.userInfo.moneybag_id=data.walles.moneybag_id;
      store.commit({
        type: "GetuserInfo",
        userInfo: store.state.userInfo,
      });
    };
    onload();
    return { ...toRefs(data) };
  },
};
</script>
<style lang="scss" scoped>
.wallet {
  border-radius: 1rem;
  margin: 1.5rem 1rem 1rem;
  padding: 1rem;
  background: linear-gradient(to bottom, #4c4a4b, #1c1c1c);
  // linear-gradient(to right, #222222,#585454 )
  box-shadow: 0px 0px 5px #707070;
  position: relative;
  .cardtitle {
    color: #e2dfaf;
    border: 2px solid #aeac92;
    width: 10rem;
    padding: 4px;
    border-radius: 2rem;
    font-family: fangsong;
    margin: auto;
    position: absolute;
    top: -1.3rem;
    left: 0;
    right: 0;
    background: #3a3939;
    font-weight: 600;
  }
  .walletinfo {
    display: flex;
    justify-content: space-between;
    margin: 1rem;
    font-size: 1.2rem;
    color: #aeac92;
    padding: 0.5rem;
    text-align: left;
  }
  .sum {
    text-align: left;
  }
  .Cumulative {
    display: flex;
    justify-content: space-between;
    margin: 1rem;
    // border-bottom: 1px solid #aaa;
    padding-bottom: 1rem;
    .req {
      border-radius: 2rem;
      padding: 0 1.5rem;
      margin-top: 1rem;
      line-height: 3rem;
      height: 3rem;
      color: #ffffff;
      background: linear-gradient(to right, #fb3e54, #ff6034);
    }
  }

  .font {
    padding: 0.5rem 0;
    color: #aeac92;
  }
  .red {
    font-size: 1.8rem;
    font-weight: 550;
    color: #d4d095;
  }
}
</style>